<template>
  <div class="screen-container">
    <div class="screenContent">
      <div class="leftShadow"></div>
      <div class="rightShadow"></div>
      <div class="header">
        <p>智慧房屋数据平台</p>
      </div>
      <div class="data-overview">
        <div class="overview-item">
          <div class="icon-wrapper">
            <img src="@/assets/datascreen/center_header/icon_centered01.png" alt="房屋总数">
          </div>
          <div class="data-wrapper">
            <span class="num">{{stats.totalHouses}}</span>
            <span class="label">房屋总数</span>
          </div>
        </div>
        <div class="overview-item">
          <div class="icon-wrapper">
            <img src="@/assets/datascreen/center_header/icon_centered02.png" alt="一般隐患">
          </div>
          <div class="data-wrapper">
            <span class="num">{{stats.normalRiskHouses}}</span>
            <span class="label">一般隐患房屋数</span>
          </div>
        </div>
        <div class="overview-item">
          <div class="icon-wrapper">
            <img src="@/assets/datascreen/center_header/icon_centered03.png" alt="严重隐患">
          </div>
          <div class="data-wrapper">
            <span class="num">{{stats.highRiskHouses}}</span>
            <span class="label">严重隐患房屋数</span>
          </div>
        </div>
        <div class="overview-item">
          <div class="icon-wrapper">
            <img src="@/assets/datascreen/center_header/icon_centered04.png" alt="房屋档案">
          </div>
          <div class="data-wrapper">
            <span class="num">{{stats.houseFiles}}</span>
            <span class="label">房屋档案数</span>
          </div>
        </div>
        <div class="overview-item">
          <div class="icon-wrapper">
            <img src="@/assets/datascreen/center_header/icon_centered05.png" alt="设备告警">
          </div>
          <div class="data-wrapper">
            <span class="num">{{stats.deviceAlerts}}</span>
            <span class="label">设备告警数</span>
          </div>
        </div>
      </div>
      <div class="left-panel">
        <div class="panel-item">
          <div class="panel-title">房屋隐患点比例</div>
          <!-- <div class="chart-wrapper" ref="chart1"></div> -->
          <charts1 class="chart-wrapper" :dataSource="chartData.riskPie"/>
        </div>
        <div class="panel-item">
          <div class="panel-title">房屋档案TOP5</div>
          <div class="chart-wrapper" ref="chart2"></div>
        </div>
        <div class="panel-item">
          <div class="panel-title">设备类型分布</div>
          <div class="chart-wrapper" ref="chart3"></div>
        </div>
      </div>
      <div class="right-panel">
        <div class="panel-item" style="position:relative" v-if="!chartData.alertTop5.names.length">
          <div style="position:absolute;left:0;top:50px; height: calc(100% - 50px);
          width: 100%;display:flex;justify-content:center;align-items:center;flex-direction:column">
            <img :src="noData" alt="">
            <div style="color:#FFFFFF">暂无数据</div>
          </div>
          <div class="panel-title">设备告警次数TOP5</div>
          <div class="chart-wrapper" ref="chart4"></div>
        </div>
        <div class="panel-item houseItem">
          <div class="panel-title">房屋类型占比</div>
          <div class="chart-wrapper " ref="chart5">
            
          </div>
          <div class="house">
            <div v-for="(item,index) in chartData.houseType" :key="index" :class="['zhanbi'+(index+1) ,'zhanbi']"><span>{{ item.name }}</span><span>{{ item.value }}</span></div>
            <!-- <div class="zhanbi2 zhanbi"><span>平房</span><span>1</span></div>
            <div class="zhanbi3 zhanbi"><span>平房</span><span>1</span></div>
            <div class="zhanbi4 zhanbi"><span>平房</span><span>1</span></div> -->
          </div>

        </div>
        <div class="panel-item">
          <div class="panel-title">近期房屋排查记录</div>
          <div class="list-wrapper">
            <div class="record-item" v-for="(item, index) in recordList" :key="index">
              <div class="status-icon" :class="item.type"></div>
              <div class="record-content">
                <div class="record-info">
                  <div class="record-time">{{ item.time }}</div>
                  <div class="record-address">{{ item.address }}</div>
                </div>
                <div class="record-status" :class="item.type">{{ item.status }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="button">
          <div  v-for="(item,index) in menuList" :key="index" @click="()=>click(item.path)" :class="['menuItem',currentPath==item.path?'activeItem':'']"><div class="text">{{ item.name }}</div>  </div>
        </div>
      </div>
      <BaiduMap />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import NanjingMap from './map.vue'
import BaiduMap from './baiduMap.vue'
import charts1 from './charts1.vue'
import request from '@/utils/request'
import { getScreenStats, getHouseRiskDistribution, getDeviceTypeDistribution, getHouseDocumentTop5, getDeviceAlertTop5, getHouseTypeDistribution, getRecentInspections, getHouseLocations, getDeviceLocations } from "@/api/screen/index";
import { computed } from 'vue'
export default {
  name: 'Screen',
  components: {
    BaiduMap, charts1
  },
  dicts: ['safety_danger_type'],
  data() {
    return {
      menuList:[
        {
          name:'房屋管理',
          path:'/screen'
        },
        {
          name:'视频监控',
          path:''
        }
      ],
      chartData: {
        riskPie: [],
        houseTop5: {
          names: [],
          values: []
        },
        deviceType: [],
        alertTop5: {
          names: [],
          values: []
        },
        houseType: []
      },
      charts: [],
      recordList: [
        // { time: '2025-01-24', address: '禄口东路7号cent大厦', status: '存在一般安全隐患房屋', type: 'warning' },
        // { time: '2018-01-01', address: '禄口东路7号cent大厦', status: '存在重大安全隐患房屋', type: 'danger' },
        // { time: '2016-01-01', address: '禄口东路7号cent大厦', status: '存在一般安全隐患房屋', type: 'warning' }
      ],
      icon2: require('@/assets/datascreen/newScreen/icon2.png'),
      noData: require('@/assets/datascreen/newScreen/noData.png'),
      
      stats:{
        totalHouses: 0,
        normalRiskHouses: 0,
        highRiskHouses: 0,
        houseFiles: 0,
        deviceAlerts: 0
      }
    }
  },
  computed:{
    currentPath(){

      return this.$route.path
    }
  },
  watch:{
    chartData:{
      handler(newData,oldData){
        this.initTop5()
        this.initDeviceDist()
        this.initAlarmData()
        this.initHouseType()
        },
        deep: true
    }
  },
  
  mounted() {
    this.getStats();
    this.getLeftPanelData();
    this.getRightPanelData();
    this.$nextTick(() => {
      setTimeout(() => {
        window.addEventListener('resize', this.handleResize)
      }, 200)
    })
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.charts.forEach(chart => {
      chart.dispose()
    })
  },
  methods: {
        // 获取左侧图表数据
        async getLeftPanelData() {
      try {
        // 并行获取三个图表的数据
        const [riskRes, top5Res, deviceRes] = await Promise.all([
          getHouseRiskDistribution(),
          getHouseDocumentTop5(),
          getDeviceTypeDistribution()
        ]);

        // 更新房屋隐患占比图数据
        if (riskRes.code === 200) {
          this.chartData.riskPie = [
            { value: this.stats.totalHouses - this.stats.normalRiskHouses - this.stats.highRiskHouses, 
              name: '正常房屋', 
            },
            { value: this.stats.normalRiskHouses, 
              name: '一般隐患', 
            },
            { value: this.stats.highRiskHouses, 
              name: '严重隐患', 
            }
          ];
          // this.updateRiskPieChart();
        }else{
          this.chartData.riskPie = [
            { value: 0, 
              name: '正常房屋', 
            },
            { value: 0, 
              name: '一般隐患', 
            },
            { value: 0, 
              name: '严重隐患', 
            }
          ]
        }

        // 更新房屋档案TOP5数据
        if (top5Res.code === 200) {
          const top5Data = top5Res.data;
          this.chartData.houseTop5.names = top5Data.map(item => item.name);
          this.chartData.houseTop5.values = top5Data.map(item => item.value);
          // this.updateHouseTop5Chart();
        }

        // 更新设备类型分布数据
        if (deviceRes.code === 200) {
          this.chartData.deviceType = deviceRes.data.map(item => ({
            value: item.value,
            name: item.name,
            // itemStyle: { 
            //   color: this.getDeviceTypeColor(item.name)
            // }
          }));
          // this.updateDeviceTypeChart();
        }
      } catch (error) {
        console.error('获取左侧面板数据失败:', error);
      }
    },
        // 获取右侧面板数据
        async getRightPanelData() {
      try {
        // 并行获取三个图表的数据
        const [alertRes, typeRes, inspectionRes] = await Promise.all([
          getDeviceAlertTop5(),
          getHouseTypeDistribution(),
          getRecentInspections()
        ]);

        // 更新设备告警TOP5数据
        if (alertRes.code === 200) {
          const alertData = alertRes.data;
          this.chartData.alertTop5.names = alertData.map(item => item.name);
          this.chartData.alertTop5.values = alertData.map(item => item.value);
          // this.updateAlertTop5Chart();
        }

        // 更新房屋类型分布数据
        if (typeRes.code === 200) {
          this.chartData.houseType = typeRes.data.map(item => ({
            value: item.value,
            name: item.name,
            // itemStyle: { 
            //   color: this.getHouseTypeColor(item.name)
            // }
          }));
          // this.updateHouseTypeChart();
        }

        // 更新近期排查记录
        if (inspectionRes.code === 200) {
          this.recordList = inspectionRes.data.map(item => {
            return {
              time: this.parseTime(item.inspectTime),
              address: item.houseAddress,
              // status: item.resultClass==1? '存在安全隐患':'warning',
              type: item.resultClass==1? 'danger':'warning',
              status: this.selectDictLabel(this.dict.type.safety_danger_type, item.checkResult)
            };
          });
          // console.log(this.recentRecords);
        }
      } catch (error) {
        console.error('获取右侧面板数据失败:', error);
      }
    },
    // 获取统计数据
  async getStats() {
    try {
      const res = await request({
        url: '/screen/stats',
        method: 'get'
      })
      if (res.code === 200) {
        this.stats = res.data
      }
    } catch (error) {
      console.error('获取统计数据失败:', error)
    }
  },
  initTop5(){
     // 房屋档案TOP5
     if (this.$refs.chart2) {
          const chart2 = echarts.init(this.$refs.chart2)
          this.charts.push(chart2)
          chart2.setOption({
            color: [{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: 'rgb(0,106,233)'
              }, {
                offset: 1,
                color: 'rgb(2,186,236)'
              }]
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#fff'
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                }
              }
            },
            yAxis: {
              type: 'category',
              data: this.chartData.houseTop5.names,
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#fff',
                fontSize: 14
              }
            },
            series: [{
              type: 'bar',
              data: this.chartData.houseTop5.values,
              barWidth: 12,
              itemStyle: {
                borderRadius: [0, 20, 20, 0]
              }
            }]
          })
        }
  },
  initDeviceDist(){
            // 设备类型分布
            if (this.$refs.chart3) {
          const chart3 = echarts.init(this.$refs.chart3)
          this.charts.push(chart3)
          chart3.setOption({
            color: ['#00ffff', '#ff9900', '#7cffb2'],
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              right: 10,
              top: 'center',
              itemGap: 15,
              formatter: function (name) {
                const data = chart3.getOption().series[0].data;
                const target = data.find(item => item.name === name);
                const index = data.findIndex(item => item.name === name);
                const colors = ['rgba(0,255,255,0.1)', 'rgba(255,153,0,0.1)', 'rgba(124,255,178,0.1)'];
                return `{back${index}|    ${name}  ${target.value}%}`;
              },
              textStyle: {
                rich: {
                  back0: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(0,255,255,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back1: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(255,153,0,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back2: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(124,255,178,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  }
                }
              },
              icon: 'rect',
              itemWidth: 6,
              itemHeight: 6,
              itemStyle: {
                borderWidth: 0
              },
              padding: [5, 10]
            },
            graphic: {
              elements: [
                {
                  type: 'image',
                  style: {
                    image: this.icon2, // 这里替换为你的图片URL
                    width: 70, // 图片的宽度
                    height: 70 // 图片的高度
                  },
                  left: '22%', // 图片的水平位置
                  top: 'center' // 图片的垂直位置
                }]
            },
            series: [{
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['30%', '50%'],
              data: this.chartData.deviceType,
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  formatter: '{b}: {d}%',
                  color: '#fff'
                }
              },
              itemStyle: {
                // 设置边框宽度，控制间隔大小
                borderWidth: 5,
                // 设置边框颜色为背景色，营造间隔效果
                borderColor: '#013CA3'
              },
              z: 2
            },
            {
              type: 'pie',
              radius: ['54%', '80%'],
              center: ['30%', '50%'],
              data: [10, 10, 10, 10, 10, 10

              ],
              label: {
                show: false
              },
              itemStyle: {
                color: 'rgba(83, 152, 241, 0.30)',
                // 设置边框宽度，控制间隔大小
                borderWidth: 2,
                // 设置边框颜色为背景色，营造间隔效果
                borderColor: '#013CA3'
              },
              emphasis: {
                label: {
                  show: false,
                  formatter: '{b}: {d}%',
                  color: '#fff'
                }
              },
              z: 1

            },

            ]
          },
          )
        }
  },
  initAlarmData(){
        // 设备告警次数TOP5
        if (this.$refs.chart4) {
          const chart4 = echarts.init(this.$refs.chart4)
          this.charts.push(chart4)
          chart4.setOption({
            color: [{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: 'rgb(0,106,233)'
              }, {
                offset: 1,
                color: 'rgb(2,186,236)'
              }]
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#fff'
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                }
              }
            },
            yAxis: {
              type: 'category',
              data: this.chartData.alertTop5.names,
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#fff',
                fontSize: 14
              }
            },
            series: [{
              type: 'bar',
              data: this.chartData.alertTop5.values,
              barWidth: 12,
              itemStyle: {
                borderRadius: [0, 20, 20, 0]
              }
            }]
          })
        }
  },
  initHouseType(){
           // 房屋类型占比
           if (this.$refs.chart5) {
          const chart5 = echarts.init(this.$refs.chart5)
          this.charts.push(chart5)
          chart5.setOption({
            color: ['#00ffff', '#ff9900', '#7cffb2', '#7cffb2'],
            tooltip: {
              trigger: 'item'
            },
            legend: {
              show: false,
              orient: 'vertical',
              right: 10,
              top: 'center',
              itemGap: 15,
              formatter: function (name) {
                const data = chart5.getOption().series[0].data;
                const target = data.find(item => item.name === name);
                const index = data.findIndex(item => item.name === name);
                return `{back${index}|    ${name}  ${target.value}%}`;
              },
              textStyle: {
                rich: {
                  back0: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(0,255,255,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back1: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(255,153,0,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back2: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(124,255,178,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back3: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(124,255,178,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  }
                }
              },
              icon: 'rect',
              itemWidth: 6,
              itemHeight: 6,
              itemStyle: {
                borderWidth: 0
              },
              padding: [5, 10]
            },
            series: [{
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '50%'],
              data: this.chartData.houseType,
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  formatter: '{b}: {d}%',
                  color: '#fff'
                }
              },
              itemStyle: {
                // 设置边框宽度，控制间隔大小
                borderWidth: 2,
                // 设置边框颜色为背景色，营造间隔效果
                borderColor: '#013CA3'
              }
            },
            {
              type: 'pie',
              radius: ['34%', '35%'],
              center: ['50%', '50%'],

              data: [100],
              label: {
                show: false
              },
              itemStyle: {
                color: 'rgba(131, 243, 254, 0.22)'
              }
            },
            {
              type: 'pie',
              radius: ['65%', '66%'],
              center: ['50%', '50%'],

              data: [100],
              label: {
                show: false
              },
              itemStyle: {
                color: 'rgba(131, 243, 254, 0.22)'
              }
            },
            ]
          })
        }
  },

    handleResize() {
      if (this.charts.length) {
        this.charts.forEach(chart => {
          chart && chart.resize()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#050234 0%, #05013C 100%);

  .leftShadow {
    position: fixed;
    left: 3.5%;
    top: 1.5%;
    height: 97%;
    width: 25%;
    border-radius: 5%;
    z-index: 3;
    background: linear-gradient(to right, #014BBE, rgba(37, 188, 245, 0));

  }

  .rightShadow {
    position: fixed;
    right: 3.5%;
    top: 1.5%;
    height: 97%;
    border-radius: 5%;
    width: 25%;
    z-index: 3;
    background: linear-gradient(to left, #014BBE, rgba(37, 188, 245, 0));

  }

  .screenContent {
    width: 93%;
    height: 97%;
    border: 3px solid #25BCF5;
    border-radius: 5%;
    box-shadow: 0px 2px 40px 2px rgba(37, 188, 245, 0.8), inset 0px 0px 100px 2px rgba(26, 163, 216, 0.68),

    ;
    position: relative;
    z-index: 5;

    .header {
      width: 100%;
      background: url('~@/assets/datascreen/newScreen/top.png') no-repeat center center;
      background-size: 100% 96%;
      position: absolute;
      left: 0;
      top: -1%;
      z-index: 4;
      height: 100px;

      display: flex;
      justify-content: center;

      p {
        background: linear-gradient(180deg, #FFFFFF 0%, #90F9FE 100%), #FFFFFF;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        line-height: 66px;
        letter-spacing: 2px;
        margin: 0;
        font-weight: 600;

      }
    }

    .data-overview {
      position: fixed;
      width: 45%;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      justify-content: space-around;
      top: 120px;
      margin-bottom: 15px;
      padding: 18px 8px;
      background: url('~@/assets/datascreen/center_header/pic_centeredbg.png') no-repeat;
      background-size: 100% 100%;
      z-index: 5;

      .overview-item {
        display: flex;
        align-items: center;
        gap: 6px;

        .icon-wrapper {
          width: 58px;
          height: 58px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .data-wrapper {
          display: flex;
          flex-direction: column;
          gap: 1px;
          align-items: center;

          .num {
            font-size: 26px;
            font-weight: bold;
            color: #fff;
            line-height: 1;
          }

          .label {
            font-size: 12px;
            color: #fff;
            white-space: nowrap;
          }
        }
      }
    }

    .bottom {
      width: 28%;
      background: url('~@/assets/datascreen/newScreen/bottom.png') no-repeat center bottom;
      background-size: 100% 52%;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      bottom: -4px;
      z-index: 4;
      height: 120px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      // .shadow {
      //   height: 1px;
      //   width: 100%;
      //   box-shadow: 0px 2px 80px 0px rgba(0, 0, 0, 0.9);
      //   background: rgba(0, 0, 0, 0);
      // }
      .button{
        width:80%;
        height:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .menuItem{
          width:160px;
          line-height:46px;
          text-align:center;
          
          color:#fff;
          cursor: pointer;
        }
        
        .activeItem{
          background: url('~@/assets/datascreen/newScreen/button.png') no-repeat center center;
          background-size: 100% 100%;
          .text{
          background: linear-gradient(90deg, #FFFFFF 0%, #83F3FE 100%);
          -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }
        }

      }
    }

    .left-panel {
      position: absolute;
      left: 0;
      top: 4%;
      z-index: 5;
    }

    .right-panel {
      position: absolute;
      right: 0;
      top: 4%;
    }

    .left-panel,
    .right-panel {
      width: 25%;
      height: 96%;
      z-index: 10;

      .panel-item {
        height: 32%;
        // background: rgba(0,47,167,0.2);
        // border: 1px solid #0072ff;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 10px;

        .panel-title {
          font-size: 16px;
          font-weight: 600;
          color: #fff;
          margin-bottom: 10px;
          height: 40px;
          line-height: 40px;
          background: url('~@/assets/datascreen/pic_title_bg.png') no-repeat;
          background-size: 100% 100%;
          padding-left: 20px;
          position: relative;
        }

        .chart-wrapper {
          height: calc(100% - 50px);
          width: 100%;
        }
        .house{
          height: calc(100% - 50px);
          width: 100%;
          position: absolute;
          right:0;
          bottom:0;
          display: flex;
          justify-content:space-around;
          align-items: center;
          flex-wrap: wrap;
          align-content: center;
          .zhanbi{
            width:30%;
            height:26%;
            margin:2% 5%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color:#fff;
            padding:0 5%
          }
          // .zhanbi:nth-child(even){
          //   justify-content: flex-end;
          //   align-items: center;
          //   color:#fff
          // }
 
          .zhanbi1{
            background:url('~@/assets/datascreen/newScreen/zhanbi1.png') no-repeat center center;
            background-size:100% 100%;
 
          }
          .zhanbi2{
            background:url('~@/assets/datascreen/newScreen/zhanbi2.png') no-repeat center center;
            background-size:100% 100%;
          }
          .zhanbi3{
            background:url('~@/assets/datascreen/newScreen/zhanbi3.png') no-repeat center center;
            background-size:100% 100%;
          }
          .zhanbi4{
            background:url('~@/assets/datascreen/newScreen/zhanbi4.png') no-repeat center center;
            background-size:100% 100%;
          }
        }

        .list-wrapper {
          height: calc(100% - 50px);
          overflow-y: auto;
          padding: 0 10px;

          .record-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);

            .status-icon {
              width: 50px;
              height: 50px;
              margin-right: 15px;
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: #fff;
              position: relative;

              &.warning {
                background: url('~@/assets/datascreen/other/pic_circleblue.png') no-repeat center;
                background-size: contain;

                &::after {
                  content: '一般';
                  position: absolute;
                }
              }

              &.danger {
                background: url('~@/assets/datascreen/other/pic_circlered.png') no-repeat center;
                background-size: contain;

                &::after {
                  content: '重大';
                  position: absolute;
                }
              }
            }

            .record-content {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 15px;

              .record-info {
                display: flex;
                flex-direction: column;
                gap: 5px;
                width: 200px;

                .record-time {
                  font-size: 14px;
                  color: #00ffff;
                }

                .record-address {
                  font-size: 14px;
                  color: #fff;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }

              .record-status {
                font-size: 14px;
                width: 160px;
                flex-shrink: 0;

                &.warning {
                  color: #00ffff;
                }

                &.danger {
                  color: #ff0000;
                }
              }
            }
          }

          &::-webkit-scrollbar {
            width: 4px;
          }

          &::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
          }
        }
        
/* 隐藏垂直滚动条 */
.list-wrapper::-webkit-scrollbar {
  width: 0;
}
 
/* 隐藏水平滚动条 */
.list-wrapper::-webkit-scrollbar {
  height: 0;
}
      }
      .houseItem{
        position: relative;
      }
    }
  }

}
</style>
